import React, { Component } from 'react'
import { reqcartlist, reqcartedit, reqcartdelete } from '../../http/api'
import { Toast } from 'antd-mobile'
import "./Shop.less"

export default class Shop extends Component {
  constructor() {
    super()
    this.state = {
      shopcar: [],
      allcheck: false,
    }
  }

  componentDidMount() {
    let { uid } = JSON.parse(sessionStorage.getItem("info"));
    reqcartlist({ uid }).then((res) => {
      Toast.show(res.data.msg);
      this.setState({
        shopcar: res.data.list[1].content,
      })
    })
  }

  add(id) {
    /* 请求 */
    reqcartedit({
      id,
      type: 2,
    }).then(res => {
      if (res.data.code === 200) {
        Toast.show(res.data.msg);
        let arr = this.state.shopcar.map(item => (item.checked));
        this.state.shopcar.forEach((item, index) => (item.checked = arr[index]));
        /* 刷新页面 */
        let { uid } = JSON.parse(sessionStorage.getItem("info"));
        reqcartlist({
          uid
        }).then(res => {
          if (res.data.code === 200) {
            res.data.list[1].content.forEach((item, index) => (item.checked = arr[index]))
            this.setState({
              ...this.state,
              shopcar: res.data.list[1].content
            })
          }
        })
      }
    })
  }
  /* 减 */
  sub(id) {
    /* 请求 */
    reqcartedit({
      id,
      type: 1,
    }).then(res => {
      if (res.data.code === 200) {
        Toast.show(res.data.msg);
        let arr = this.state.shopcar.map(item => (item.checked));
        this.state.shopcar.forEach((item, index) => (item.checked = arr[index]));
        /* 刷新页面 */
        let { uid } = JSON.parse(sessionStorage.getItem("info"));
        reqcartlist({
          uid
        }).then(res => {
          if (res.data.code === 200) {
            res.data.list[1].content.forEach((item, index) => (item.checked = arr[index]))
            this.setState({
              ...this.state,
              shopcar: res.data.list[1].content
            })
          }
        })
      }
    })
  }

  /* 删 */
  del(id) {
    reqcartdelete({ id }).then(res => {
      if (res.data.code === 200) {
        Toast.show(res.data.msg);
        /* 刷新页面 */
        let arr = this.state.shopcar.map(item => (item.checked));
        this.state.shopcar.forEach((item, index) => (item.checked = arr[index]));
        let { uid } = JSON.parse(sessionStorage.getItem("info"));
        reqcartlist({ uid }).then((res) => {
          Toast.show(res.data.msg);
          let { uid } = JSON.parse(sessionStorage.getItem("info"));
        reqcartlist({
          uid
        }).then(res => {
          if (res.data.code === 200) {
            res.data.list[1].content.forEach((item, index) => (item.checked = arr[index]))
            this.setState({
              ...this.state,
              shopcar: res.data.list[1].content
            })
          }
        })
         /*  this.setState({
            shopcar: res.data.list[1].content,
          }) */
        })
      }
    })
  }

  /* 全选 */
  allchecked(e) {
    this.setState({
      ...this.state,
      allcheck: e
    })
    this.state.shopcar.forEach(item => (item.checked = e))
  }
  /* 单选 */
  onechange(e, id) {
    console.log(this.state.shopcar, e, id);
    this.state.shopcar.forEach(item => (item.id === id && (item.checked = e))) /* 加上属性 */
    let arr = this.state.shopcar.every(item => item.checked) /* 返回true和flase */
    this.setState({
      ...this.state,
      allcheck: arr
    })
  }


  render() {
    let { shopcar, allcheck } = this.state;
    let allprice = shopcar.reduce((val, item) => (item.checked ? val + item.price * item.num : val), 0)
    return (
      <div className='shop'>
        {shopcar.map((item) => {
          return (
            <div className='oneshop' key={item.id}>
              <div className='check1'><input type="checkbox" checked={item.checked || ''} onChange={(e) => (this.onechange(e.target.checked, item.id))} /></div>
              <div className='imgbox1'><img src={'http://localhost:1000' + item.img} alt="" /></div>
              <div className='btn1'>
                <p>{item.goodsname}</p>
                <p>{item.price}</p>
                <div className='changenum'>
                  <button onClick={() => (this.add(item.id))}>+</button>
                  {item.num}
                  <button onClick={() => (this.sub(item.id))}>-</button>
                  <button onClick={() => (this.del(item.id))}>删</button>
                </div>
              </div>
            </div>
          )
        })}
        <div className='allprice'>
          <input type="checkbox" checked={allcheck} onChange={(e) => (this.allchecked(e.target.checked))} />全选
          <div>合计：{allprice}</div>
        </div>
      </div>
    )
  }
}